<template>
	<div class="att">
		<div class="container mt-3" style="margin-left: 10%;">
			<h2>欢迎您</h2>
			<p>亲爱的管理员用户,操作以下数据请核实：</p>
			<table class="table">
				<thead>
					<tr>
						<th>用户ID</th>
						<th>联系方式</th>
						<th>姓名</th>
						<th>密码</th>
						<th>身份</th>
						<th>出生日期</th>
						<th>状态</th>
						<th>描述</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(item,index) in tableData" :key="index">
						<td>{{item.id}}</td>
						<td>{{item.phone}}</td>
						<td>{{item.name}}</td>
						<td>{{item.pwd}}</td>
						<td>{{item.region}}</td>
						<td>{{item.date1}}</td>
						<td>{{item.delivery}}</td>
						<td>{{item.descs}}</td>
						<!-- 操作按钮 -->
						<td class="td-table-fontcolor">
							<div class="btn-group">
								<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
									操作 <span class="caret"></span>
								</button>
								<ul class="dropdown-menu" role="menu">
									<li>
										<a href="#" data-toggle="modal" data-target="#myModal"
											@click="updateBuId(item.id)">编辑</a>
									</li>
									<li class="divider"></li>
									<li><a href="javascript:" @click="deleteUserById(item.id)">删除</a></li>
								</ul>
							</div>

						</td>
					</tr>
				</tbody>
			</table>

			<!-- 模态框（Modal） -->
			<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
				aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
								&times;
							</button>
							<h4 class="modal-title" id="myModalLabel">
								<b>请在下方填写新的用户信息</b>
							</h4>
						</div>
						<div class="modal-body">
							<input type="hidden" v-model="this.user.id" ref="userId" />
							手机号: <input type="text" class="form-control" readonly="readonly" placeholder="请输入手机号"
								v-model="this.user.phone"><br />
							姓名: <input type="text" class="form-control" readonly="readonly" placeholder="请输入姓名"
								v-model="this.user.name"><br />
							请输入新密码: <input type="text" class="form-control" name="pwd" placeholder="请输入密码" ref="pswd"><br />
							身份:<input type="text" class="form-control" readonly="readonly" placeholder="请输入身份"
								v-model="this.user.region"><br />
							出生日期: <input type="text" class="form-control" readonly="readonly" placeholder="请输入出生日期"
								v-model="this.user.date1"><br />
							是否在籍:<input type="text" class="form-control" readonly="readonly" placeholder="请输入是否在籍"
								v-model="this.user.delivery"><br />
							介绍: <input type="text" class="form-control" readonly="readonly" placeholder="请输入介绍"
								v-model="this.user.desc"><br />
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">关闭
							</button>
							<button type="button" class="btn btn-primary" @click="updatePwd" data-dismiss="modal">
								提交更改
							</button>
						</div>
					</div><!-- /.modal-content -->
				</div><!-- /.modal -->
			</div>
		</div>
	</div>
</template>

<script>
	//引入axios
	import axios from 'axios'
	export default {

		methods: {
			//管理员更新用户信息(尚未解决Error in render: "TypeError: Cannot read properties of undefined (reading 'id')")
			updatePwd() {
				axios({
					//请求地址
					url: 'http://localhost:8080/axios/updateUserByAd',
					//请求方式
					method: 'post',
					params: {
						id: this.$refs.userId.value,
						pwd: this.$refs.pswd.value
					}
				}).then(
					res => {
						this.user = res.data.success
						
					},
					err => {
						console.log(err.message)
					}
				)
			},
			//根据id查询信息
			updateBuId(id) {
				axios({
					//请求地址
					url: 'http://localhost:8080/axios/selectByPrimaryKey',
					//请求方式
					method: 'post',
					params: {
						id: id
					}
				}).then(
					res => {
						this.user = res.data.success
						console.log(res.data)
					},
					err => {
						console.log(err.message)
					}
				)
			},
			//管理员删除用户
			deleteUserById(id) {
				axios({
					//请求地址
					url: 'http://localhost:8080/axios/deleteUserByAd',
					//请求方式
					method: 'post',
					params: {
						id: id
					}
				}).then(
					res => {
						console.log(res.data)
					},
					err => {
						console.log(err.message)
					}
				)
			},
			tableRowClassName({
				row,
				rowIndex
			}) {
				if (rowIndex === 1) {
					return 'warning-row';
				} else if (rowIndex === 3) {
					return 'success-row';
				}
				return '';
			}
		},
		data() {
			return {
				isLogin: false,
				user: '',
				tableData: [{
					id: '暂无',
					phone: '暂无',
					name: '暂无',
					pwd: '暂无',
					region: '暂无',
					date1: '暂无',
					delivery: '暂无',
					descs: '暂无',
				}]
			}
		},
		mounted() {
			//请求是否为管理员
			axios({
				//请求地址
				url: 'http://localhost:8080/axios/selectRegion.do',
				//请求方式
				method: 'post',
			}).then(
				res => {
					//校验身份是不是管理员
					if (res.data.region == 'admin') {
						axios({
							//请求地址
							url: 'http://localhost:8080/axios/selectAllUserByAd',
							//请求方式
							method: 'post',
							params: {
								pageNo: 1
							}
						}).then(
							res => {
								this.tableData = res.data.success
							},
							err => {
								console.log(err.message)
							}
						)
					} else if (res.data.region == '尚未登录!') {
						alert("您无权限查看操作数据原因可能是:尚未登录!")
					} else {
						alert("您还不是管理员")
					}
				},
				err => {
					console.log(err.message)
				}
			)

		}
	}
</script>

<style scoped>
	.att {
		width: 75%;
		margin: 0 auto;
	}

	.el-table .warning-row {
		background: oldlace;
	}

	.el-table .success-row {
		background: #f0f9eb;
	}

	.td-table-fontcolor {
		color: #00BFFF;
		cursor: pointer;
	}
</style>
